<template>
  <div class="top">
    <van-nav-bar title="消息" />
  </div>
  <div class="content">
    <van-cell-group v-for="item in lists" :key="item">
      <van-cell center>
        <template #icon>
          <van-image class="avatar-image" :src="item.img" />
        </template>
        <template #title>
          <span>{{ item.title }}</span>
        </template>
        <template #value>
          <span>{{ item.value }}</span>
        </template>
        <template #label>
          <span>{{ item.label }}</span>
        </template>
      </van-cell>
    </van-cell-group>
  </div>
</template>
<script setup>
const lists = [
  {
    img: "../images/avatar1.jpg",
    title: "食品旗舰店",
    value: "星期一",
    label: "您有一条店铺消息",
  },
  {
    img: "../images/avatar2.jpg",
    title: "水果旗舰店",
    value: "星期二",
    label: "亲爱的果粉:",
  },
  {
    img: "../images/avatar3.png",
    title: "订阅号消息",
    value: "星期日",
    label: "水果旗舰店：【新到水果新...",
  },
  {
    img: "../images/avatar4.png",
    title: "消息号内容",
    value: "星期一",
    label: "食品旗舰店：大量新品到货",
  },
];
</script>

<style scoped>

.top {
  --van-nav-bar-background: #ee7a06;
  --van-nav-bar-icon-color: #fff;
  --van-nav-bar-title-text-color: #fff;
}

.avatar-image {
  margin: 0 10px 0 -10px;
  width: 40px;
  height: 40px;
  border-radius: 4px;
}

</style>

